<template>
  <!--面包屑-->
    <el-row>
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">主页</el-breadcrumb-item>
                <el-breadcrumb-item to="/wisdomeat">智慧食堂</el-breadcrumb-item>
                <el-breadcrumb-item>商家管理</el-breadcrumb-item>
                <el-breadcrumb-item>菜品管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </el-row>
  <!--搜索区-->
    <el-row>
        <el-col :span="24">
            <el-form label-width="90px">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="菜品名称">
                            <el-input v-model="query.dname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="菜品编号">
                            <el-input v-model="query.dnumber"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="菜品状态">
                            <el-select v-model="query.dsName.id">
                                <el-option v-for="ds in dsList" :label="ds.dsName" :key="ds.id"
                                           :value="ds.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="菜品类型">
                            <el-select v-model="query.dtName.id">
                                <el-option v-for="dt in dtList" :label="dt.dtName" :key="dt.id"
                                           :value="dt.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="success" style="width: 100%;" @click="btnQueryClick">
                                <i class="fa fa-search"></i>搜索
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
    </el-row>
  <!--    数据表格-->
    <el-row>
        <el-button-group>
            <el-button type='success' @click="btnAddClick">添加</el-button>
        </el-button-group>
        <el-table :data="dishesList" stripe border style="width: 99%">
            <el-table-column type="index" label="序号" align="center" width="60px"/>
            <el-table-column label="图片" align="center">
                <template #default="scope">
                    <el-image :src="scope.row.dphoto" :preview-src-list="[scope.row.dphoto]"
                              preview-teleported></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="dnumber" label="菜品编号" align="center"/>
            <el-table-column prop="dname" label="菜品" align="center"/>
            <el-table-column prop="dtName" label="菜品类型" align="center"/>
            <el-table-column prop="dprice" label="价格" align="center">
                <template #default="scope">
                    <strong>￥{{ scope.row.dprice }}</strong>
                </template>
            </el-table-column>
            <el-table-column prop="dcount" label="数量" align="center"/>
            <el-table-column prop="dweight" label="重量" align="center"/>
            <el-table-column prop="dsName" label="状态" align="center">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.dstateId===2">{{ scope.row.dsName }}</el-tag>
                    <el-tag type="success" v-if="scope.row.dstateId===1">{{ scope.row.dsName }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="ename" label="审批" align="center">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.dexamineId===3">{{ scope.row.ename }}</el-tag>
                    <el-tag type="primary" v-if="scope.row.dexamineId===1">{{ scope.row.ename }}</el-tag>
                    <el-tag type="success" v-if="scope.row.dexamineId===2">{{ scope.row.ename }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="text" @click="btnEditClick(scope.row)">
                        <i class="fa fa-edit"></i>
                        编辑
                    </el-button>
                    <el-popconfirm
                            confirm-button-text="确认"
                            cancel-button-text="取消"
                            :icon="InfoFilled"
                            icon-color="#626AEF"
                            title="您确认要修改菜品状态吗？"
                            @confirm="btnOffShelvesClick(scope.row)"
                    >
                        <template #reference>
                            <el-button type="text" v-if="scope.row.dexamineId!=2"></el-button>
                            <el-button type="text" v-if="scope.row.dstateId===1">
                                <i class="fa fa-trash"></i>
                                下架
                            </el-button>
                            <el-button type="text" v-if="scope.row.dstateId===2">上架</el-button>
                        </template>
                    </el-popconfirm>
                    <el-popconfirm
                            confirm-button-text="确认"
                            cancel-button-text="取消"
                            :icon="InfoFilled"
                            icon-color="#626AEF"
                            title="您确认要删除菜品吗？"
                            @confirm="btnDeleteClick(scope.row)"
                    >
                        <template #reference>
                            <el-button type="text">
                                <i class="fa fa-trash"></i>
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-config-provider>
            <el-pagination
                    :current-page="page.currentPage"
                    :page-size="page.pageSize"
                    background
                    layout="total, prev, pager, next,jumper"
                    :total="page.totalCount"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </el-config-provider>
    </el-row>
  <!--弹窗-->
    <el-dialog v-model="info.show">
        <template #title>
            <h1>{{ info.title }}</h1>
        </template>
        <el-form label-width="90px">
            <el-form-item label="菜品名称">
                <el-input v-model="info.dishes.dName"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="info.dishes.dPrice"></el-input>
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="info.dishes.dCount"></el-input>
            </el-form-item>
            <el-form-item label="重量">
                <el-input v-model="info.dishes.dWeight"></el-input>
            </el-form-item>
            <el-form-item label="菜品类型">
                <el-select v-model="info.dishes.dtName.id">
                    <el-option v-for="dt in dtList" :label="dt.dtName" :value="dt.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="菜品照片">
                <div>
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8888/file/upload?module=dphoto"
                            :show-file-list="false"
                            :auto-upload="true"
                            name="file"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeUpload"
                    >
                        <img :src="info.dishes.dphoto" v-if="info.dishes.dphoto" class="avatar" alt="1"/>
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus/>
                        </el-icon>
                    </el-upload>
                </div>
                <div slot="tip" style="margin-top: 210px;margin-left: -180px" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="btnSummitClick">提交</el-button>
                <el-button type="primary" @click="btnCancelClick">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";
import {Delete, Download, Plus, VideoCameraFilled, ZoomIn} from '@element-plus/icons-vue'

export default {
    name: "WisdomEat",
    components: {VideoCameraFilled, Delete, Plus, Download, ZoomIn},
    data() {
        return {
            dishesList: [],//菜品列表
            dsList: [],//菜品状态
            dtList: [],//菜品类型
            bNumber: '',//商家编号
            businessinfo: {},//商家信息
            query: {
                dname: '',
                dnumber: '',
                dtName: {
                    id: -1
                },
                dsName: {
                    id: -1
                }
            },//搜索框
            info: {
                show: false,//弹窗开关
                title: '', //弹窗名字
                dishes: {
                    dName: '',
                    dtName: {
                        id: -1
                    },
                    dsName: {
                        id: -1
                    },
                    dPrice: 0.00,
                    dCount: 0,
                    dWeight: '',
                    dphoto: ''
                } //弹窗内菜品信息
            },
            page: {
                currentPage: 1, //当前页码，初始页码为1
                totalCount: 2, //总数居条数，根据接口获取数据长度
                pageSize: 5, //每页显示的条数
                allTableData: [] //全部表格数据
            },
        }
    },
    methods: {
        //获取菜品列表
        initTable() {
            this.bNumber = sessionStorage.getItem('businessNumber')
            if (this.bNumber != null) {
                ElMessage.success({
                    message: '欢迎登录智慧食堂商家管理系统',
                    duration: 1000
                });
                axios({
                    url: 'http://localhost:8888/dishes/getDishesList',
                    method: 'get',
                    params: {bNumber: this.bNumber}
                }).then((res) => {
                    this.page.allTableData = res.data.data;
                    this.page.totalCount = res.data.total;
                    this.handleCurrentChange(1);
                })
            } else {
                ElMessage.error({
                    message: '未找到用户信息，请先登录',
                    duration: 1000
                });
            }
        },
        //获取菜品状态
        initDsList() {
            axios({
                url: 'http://localhost:8888/dishesstate/getDishesStateList',
                method: 'get',
            }).then((res) => {
                this.dsList = res.data.data;
                this.dsList.unshift({
                    id: -1,
                    dsName: '--全部状态--'
                })
            })
        },
        //获取菜品类型
        initDtList() {
            axios({
                url: 'http://localhost:8888/dishestype/getDishesTypeList',
                method: 'get',
            }).then((res) => {
                this.dtList = res.data.data;
                this.dtList.unshift({
                    id: -1,
                    dtName: '--全部类型--'
                })
            })
        },
        //获取商家信息
        initBusinessinfo() {
            axios({
                url: 'http://localhost:8888/businessinfo/getBusinessListByBNumber',
                method: 'get',
                params: {
                    bNumber: this.bNumber
                }
            }).then((res) => {
                this.businessinfo = res.data.data[0];
                if (this.businessinfo.bstatus === 3) { //判断商家状态
                    ElMessage.error({
                        message: '商家整改中，禁止操作',
                        duration: 1000
                    })
                }
            })
        },
        //重置弹窗
        setDefault() {
            this.info.dishes.dName = '';
            this.info.dishes.dPrice = 0;
            this.info.dishes.dCount = 0;
            this.info.dishes.dNumber = '';
            this.info.dishes.dWeight = '';
            this.info.dishes.dtName.id = -1;
            this.info.dishes.dsName.id = -1;
            this.info.dishes.dphoto = ''
        },
        //添加菜品，打开弹窗
        btnAddClick() {
            if (this.bNumber == null) {
                ElMessage.error({
                    message: '未找到用户信息，请先登录',
                    duration: 1000
                });
            } else if (this.businessinfo.bstatus === 3) { //判断商家状态
                ElMessage.error({
                    message: '商家整改中，禁止操作',
                    duration: 1000
                })
            } else {
                this.setDefault();
                this.info.title = '添加菜品';
                this.info.show = true;
            }
        },
        //编辑菜品，将行内数据赋给弹窗
        btnEditClick(row) {
            if (this.businessinfo.bstatus === 3) { //判断商家状态
                ElMessage.error({
                    message: '商家整改中，禁止操作',
                    duration: 1000
                })
            } else {
                this.setDefault();
                this.info.show = true;
                this.info.title = '修改菜品'
                this.info.dishes.dName = row.dname;
                this.info.dishes.dNumber = row.dnumber;
                this.info.dishes.dPrice = row.dprice;
                this.info.dishes.dCount = row.dcount;
                this.info.dishes.dWeight = row.dweight;
                this.info.dishes.dtName.id = row.dtypeId;
                this.info.dishes.dsName.id = row.dstateId;
                this.info.dishes.dphoto = row.dphoto;
                console.log(this.info.dishes.dphoto)
            }
        },
        //通过标题判断添加或修改
        btnSummitClick() {
            if (this.businessinfo.bstatus === 3) { //判断商家状态
                ElMessage.error({
                    message: '商家整改中，禁止操作',
                    duration: 1000
                })
            } else {
                if (this.info.title === '添加菜品') {
                    axios({
                        url: 'http://localhost:8888/dishes/insertDishes',
                        method: 'post',
                        params: {
                            bNumber: this.bNumber,
                            dName: this.info.dishes.dName,
                            dTypeId: this.info.dishes.dtName.id,
                            dPrice: this.info.dishes.dPrice,
                            dCount: this.info.dishes.dCount,
                            dWeight: this.info.dishes.dWeight,
                            url:this.info.dishes.dphoto,
                        }
                    }).then((res) => {
                        if (res.data.success) {
                            ElMessage.success({
                                message: '添加成功',
                                duration: 1000
                            });
                            this.info.show = false;
                            this.initTable();
                        } else {
                            ElMessage.error({
                                message: '添加失败,已有相同菜品',
                                duration: 1000
                            });
                        }
                    })
                } else if (this.info.title === '修改菜品') {
                    axios({
                        url: 'http://localhost:8888/dishes/updateDishes',
                        method: 'post',
                        params: {
                            dNumber: this.info.dishes.dNumber,
                            dName: this.info.dishes.dName,
                            dTypeId: this.info.dishes.dtName.id,
                            dPrice: this.info.dishes.dPrice,
                            dCount: this.info.dishes.dCount,
                            dWeight: this.info.dishes.dWeight,
                            url: this.info.dishes.dphoto,
                        }
                    }).then((res) => {
                        if (res.data.success) {
                            ElMessage.success({
                                message: '修改成功',
                                duration: 1000
                            });
                        }
                        this.info.show = false;
                        this.initTable();
                    })
                }
            }
        },
        //取消关闭弹窗
        btnCancelClick() {
            this.info.show = false;
        },
        //上架
        btnOnSaleClick(row) {
            axios({
                url: 'http://localhost:8888/dishes/onSaleDishes',
                method: 'post',
                params: {dNumber: row.dnumber}
            }).then((res) => {
                if (res.data.success) {
                    ElMessage.success({
                        message: '上架成功',
                        duration: 1000
                    });
                    this.initTable();
                }
            })
        },
        //通过菜品状态判断上下架
        btnOffShelvesClick(row) {
            if (this.businessinfo.bstatus === 3) { //判断商家状态
                ElMessage.error({
                    message: '商家整改中，禁止操作',
                    duration: 1000
                })
            } else {
                if (row.dstateId === 1) {
                    axios({
                        url: 'http://localhost:8888/dishes/offShelfDishes',
                        method: 'post',
                        params: {dNumber: row.dnumber}
                    }).then((res) => {
                        if (res.data.success) {
                            ElMessage.success({
                                message: '下架成功',
                                duration: 1000
                            });
                            this.initTable();
                        }
                    })
                } else if (row.dstateId === 2) {
                    this.btnOnSaleClick(row);
                }
            }
        },
        //删除菜品
        btnDeleteClick(row) {
            if (this.businessinfo.bstatus === 3) { //判断商家状态
                ElMessage.error({
                    message: '商家整改中，禁止操作',
                    duration: 1000
                })
            } else {
                axios({
                    url: 'http://localhost:8888/dishes/deleteDishes',
                    method: 'post',
                    params: {dNumber: row.dnumber}
                }).then((res) => {
                    if (res.data.success) {
                        ElMessage.success({
                            message: '删除成功',
                            duration: 1000
                        })
                        this.initTable();
                    }
                })
            }
        },
        //不定查询
        btnQueryClick() {
            if (this.bNumber == null) {
                ElMessage.error({
                    message: '未找到用户信息，请先登录',
                    duration: 1000
                });
            } else if (this.businessinfo.bstatus === 3) { //判断商家状态
                ElMessage.error({
                    message: '商家整改中，禁止操作',
                    duration: 1000
                })
            } else {
                axios({
                    url: 'http://localhost:8888/dishes/selectDishesListByExample',
                    method: 'get',
                    params: {
                        bNumber: this.bNumber,
                        dNumber: this.query.dnumber,
                        dName: this.query.dname,
                        dTypeId: this.query.dtName.id,
                        dStateId: this.query.dsName.id
                    }
                }).then((res) => {
                    this.page.allTableData = res.data.data;
                    this.page.totalCount = res.data.total;
                    this.handleCurrentChange(1)
                })
            }
        },
        //每页显示的条数
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize //改变每页显示的条数
            this.page.currentPage = 1 //每次变换单页条数后，将页面切换至第一页
            this.handleSizeChange(1) //获取第一页数据
        },
        //显示当前页数据
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage //更新当前页数据
            const pageSize = this.page.pageSize //每页数据量
            this.dishesList = [] //清空表绑定的数据
            //获取当前页数据范围：（当前页-1）*每页数据-当前页*每页数据
            this.dishesList = this.page.allTableData.slice((((currentPage - 1) * pageSize)), (currentPage * pageSize))
        },
        //文件上传成功
        handleAvatarSuccess(res,file) {
            this.info.dishes.dphoto = res.data
            console.log(this.info.dishes.dphoto)
            //强制刷新
            this.$forceUpdate;
        },
        //文件上传前
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 0.5;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 500KB!');
            }
            return isJPG && isLt2M;
        }
    },
    mounted() {
        this.initTable();
        this.initDtList();
        this.initDsList();
        this.initBusinessinfo();
    }
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.breadcrumb {
    padding: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>